<template>
	<el-dropdown @command="selectOption">
		<div class="el-dropdown-link" :style="buttonStyle">
			<span class="txt">
				{{ selected ||""}}
			</span>
			<i class="el-icon-arrow-down el-icon--right" style="margin-left: auto;">
				▼
			</i>
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item v-for="option in options" :key="option" :command="option">
					{{ option }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		ElDropdown,
		ElDropdownMenu,
		ElDropdownItem
	} from 'element-plus';
	import 'element-plus/dist/index.css';

	const props = defineProps({
		options: {
			type: Array,
			required: true,
			default: () => []
		},
		customStyle: {
			type: Object,
			default: () => ({})
		},
		buttonStyle: {
			type: Object,
			default: () => ({})
		}
	});

	const selected = ref(null);

	const selectOption = (option) => {
		selected.value = option;
	};

	onMounted(() => {
		if (Array.isArray(props.options) && props.options.length > 0) {
			selected.value = props.options[0];
		}
	});
</script>

<style scoped lang="scss">
	.el-dropdown-link {
		display: inline-flex;
		align-items: center;
		cursor: pointer;
		background: linear-gradient(90deg, #2A5B9C, #0A8EEC30);
		color: white;
		border-radius: 5px;
		font-family: 'Times New Roman', Times, serif;
		border: 2px solid #00C0FA;
		font-size: 12px;
		height: calc(100% - 6px);
		margin-top: 3px;

		.txt {
			display: inline-block;
			width: calc(100% - 16px);
			white-space: nowrap;
			overflow: hidden;
		}
	}

	.el-icon--right {
		margin-left: 5px;
	}

	.el-dropdown-menu {
		background: #f0f0f0;
		border: 1px solid #ccc;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.el-dropdown-item {
		padding: 10px;
		cursor: pointer;
		font-family: 'Times New Roman', Times, serif;
	}

	.el-dropdown-item:hover {
		background: #e0e0e0;
	}
</style>